<template>

<div>

  <el-container class="home-container"> 
  <!--头部区域-->
  <el-header>
     <div>
        
        <span>DK管理</span>
     </div>
     欢迎您使用本系统
     <el-button type="info" @click="logout">退出</el-button>
   </el-header>
  <!--主体区域-->
  <el-container>
     
    <el-aside :width="isCollapse ? '64px' :'200px' ">
    <div class="toggle-button" @click="ChangeMenuClose">|||</div>
    <el-menu
      
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409bff" 
      unique-opened 
      :collapse="isCollapse" 
      :collapse-transition="false"
      router
      :default-active="activePath"
      
     >
      <!--一级菜单开始-->
      <el-submenu  v-for="item in menulist" :key="item.id" :index="item.id+' '">
        <template slot="title">
        <!--图标-->
          <i class="el-icon-location"></i>
          <!--文字-->
          <span>{{item.menuname}}</span>
        </template>
       <!--二级菜单开始-->
        
          
          <el-menu-item  
          v-for="subitem in item.children" 
          :key="subitem.id" 
          :index="subitem.path+''"
          @click="SaveNavToSession(subitem.path+'')"
          >
          <!--图标-->
          <i class="el-icon-menu"></i>
          <!--文字-->
          <span>{{subitem.menuname}}</span>
          </el-menu-item>
        
      </el-submenu>
     
    </el-menu>
    </el-aside>
    <!--主体区域一般存放路由-->
    <el-main>
    <router-view></router-view>
    </el-main>
  </el-container>

</el-container>
</div>


</template>

<script>
//对外暴露接口
 export default {
   props:['name'],
   name:'main', 
   //组件被调用时调用的函数
   created() {
     //得到菜单
     console.log(this.$route.params.name)
     this.getMenuList()
     //获取session里面的path用来高亮显示菜单
     this.activePath = window.sessionStorage.getItem("activePath")
    
    
   },
   data () {
  
            return {
                  menulist:[],
                  iconsObj:{
                    '125':"",
                    '103':"",
                    '101':""
                  },
                  //是否折叠
                  isCollapse:false,
                  //选中路径
                  activePath:'/welcome',
            };
     
   },
   methods: {
     //登出函数
     logout(){
       window.sessionStorage.clear("token")
       this.$message.success("注销成功")


       this.$router.push("/login");
     },
     //获取菜单信息
     getMenuList(){
       let that = this
       let url = "api/GetMenu"
       let token = window.sessionStorage.getItem("token")
       let data ={
         token:token
       }
       this.$axios.post(url,this.$qs.stringify(data)).then(function(Response){
         
         console.log(Response.data)
         let message = Response.data.message
         let code = Response.data.code
         let data = Response.data.data
         if(code = 200){
             that.$message.success(message)
             that.menulist = data


         }
         else{
           that.$message.error(message)
         }
       
         

         
     })
     },
     //菜单折叠管理
     ChangeMenuClose(){
       this.isCollapse = !this.isCollapse 

     },
     //将路径存储到session里面
        SaveNavToSession(path){
          window.sessionStorage.setItem("activePath",path)
          this.activePath=path

        },
    
    },
     
   components: {

   }
 }
</script>

<style scoped>
.el-header{
  background-color: #373d41;
  display:flex;
  justify-content:space-between;
  
  align-items:center;
  color:#fff;
  > div{
    display:flex;
    align-items:center;
  }
}
.el-aside{
  background-color: #333744;
 
}
.el-main{
  background-color: #eaedf1;
  
}
.home-container{
  position: absolute;
  width:100%;
  height:100%;
  
  
}
.el-menu{
    border-right-width: 0;
  }
.toggle-button{
  background-color:#4A5064;
  font-size:10px;
  line-height:24px;
  color:white;
  text-align:center;
  letter-spacing:0.3em;
  cursor:pointer
}
 
</style>
